<template>
    <div ref="fullscreenDiv" class="board">
        <div class="title">
            <div class="left-opt">
                <a-button class="theme-btn" @click="leftShow = !leftShow">{{ leftShow ? '收起' : '展开' }}</a-button>
            </div>
            <div class="full-screen">
                <span class="time-filter">
                    <a-radio-group
                        v-model:value="search.timeType"
                        class="theme-radio"
                        size="small"
                        option-type="button"
                        buttonStyle="solid"
                        :options="timeOptions"
                        @change="changeTimeType(search.timeType)"
                    />
                    &nbsp;
                    <a-range-picker v-show="search.timeType === 7" v-model:value="search.date_range" class="theme-input" size="small" allow-clear value-format="YYYY-MM-DD" />
                </span>
                <a-button id="full-screen" class="theme-btn" @click="fullScreen">全屏</a-button>
            </div>
            {{ chooseProject?.name }}数据看板 
        </div>
        <div class="flex sidebar" style="height: calc(100% - 64px)">
            <div class="container" :style="{ width: `calc(100% - ${mapW}px)` }">
                <div class="borderB item-1">
                    <p class="titleB">
                        <em></em>
                        <span>合同统计</span>
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); overflow: hidden">
                        <div id="contractStatistics" search style="height: 100%"></div>
                    </div>
                </div>
                <div class="borderB item-2">
                    <p class="titleB">
                        <em></em>
                        <span>项目分布</span>
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); padding: 0px; position: relative">
                        <div ref="chinaMap" style="width: 1200px; height: 750px; position: absolute; left: -170px; top: -80px"></div>
                    </div>
                </div>
                <div class="borderB item-1">
                    <p class="titleB">
                        <em></em>
                        <span>计划、验收及出库统计</span>
                        <a-radio-group
                            v-model:value="dailyType"
                            class="theme-radio"
                            size="small"
                            option-type="button"
                            button-style="solid"
                            :options="dailyTypeOpts"
                            style="position: absolute; right: 10px; top: 10px"
                            @change="changeDailyType"
                        />
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); overflow: hidden">
                        <div id="dailyStatistics" style="height: 100%"></div>
                    </div>
                </div>
                <div class="borderB item-3">
                    <p class="titleB">
                        <em></em>
                        <span>零星物资数据统计</span>
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); overflow: hidden">
                        <table class="g2-table">
                            <thead class="g2-thead">
                                <tr>
                                    <th class="th-id">类别</th>
                                    <th class="th-time">验收数量</th>
                                    <th class="th-value">产生金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="g2-table-row" v-for="(item, index) in dataA" :key="index">
                                    <th class="th-id">{{ item.name }}</th>
                                    <th class="g2-table-column">
                                        <div class="barBox">
                                            <p class="bar bar1" :style="{ width: getWidthFn(item.times, 1) }"></p>
                                            <span>{{ item.times }}</span>
                                        </div>
                                    </th>
                                    <th class="g2-table-column">
                                        <div class="barBox">
                                            <p class="bar bar2" :style="{ width: getWidthFn(item.value, 2) }"></p>
                                            <span>{{ item.value }}</span>
                                        </div>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="borderB item-4">
                    <p class="titleB">
                        <em></em>
                        <span>指标对比</span>
                        <a-radio-group
                            v-model:value="indicator"
                            class="theme-radio"
                            size="small"
                            option-type="button"
                            button-style="solid"
                            :options="indicatorOpts"
                            style="position: absolute; right: 10px; top: 10px"
                            @change="changeIndicator"
                        />
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); overflow: hidden">
                        <div id="indicatorStatistics" search style="height: 100%"></div>
                    </div>
                </div>
                <div class="borderB item-5">
                    <p class="titleB">
                        <em></em>
                        <span>开累结算统计</span>
                        <a-pagination
                            v-if="supplierSettleStatistics.length > settleSize"
                            size="small"
                            class="pagination"
                            v-model:current="settlePage"
                            @change="changeSettlePage"
                            :total="supplierSettleStatistics.length"
                            :showSizeChanger="false"
                        />
                    </p>
                    <div class="borderB_cont" style="height: calc(100% - 48px); overflow: hidden">
                        <div id="supplierSettleAmountStatistics" style="height: 100%"></div>
                    </div>
                </div>
                <div class="borderB item-6">
                    <p class="titleB">
                        <em></em>
                        <span>物资申请计划</span>
                        <a-button type="link" class="position-absolute" size="small" style="right: 10px; top: 10px" @click="router.push('/purchase')">查看详情</a-button>
                    </p>
                    <a-row>
                        <template v-for="(item, index) of applyColumns" :key="index">
                            <a-col v-if="item.dataIndex === 'date'" :span="4" class="table-title" :style="index !== 0 ? 'border-left: 0px' : ''">{{ item.title }}</a-col>
                            <a-col v-else :span="5" class="table-title" :style="index !== 0 ? 'border-left: 0px' : ''">{{ item.title }}</a-col>
                        </template>
                    </a-row>
                    <div class="borderB_cont">
                        <div class="table-body flex-auto" :style="`${applyList.length > 7 ? 'animation: scroll ' + applyList.length * 1.5 + 's linear infinite' : ''}`">
                            <template v-if="applyList.length">
                                <a-row v-for="(item, index) of applyList" :key="index">
                                    <template v-for="(column, i) of applyColumns" :key="i">
                                        <a-col v-if="column.dataIndex === 'date'" class="li" :span="4">{{ item[column.dataIndex] }}</a-col>
                                        <a-col v-else data-content="完整内容" class="li" :span="5">{{ item[column.dataIndex] }}</a-col>
                                    </template>
                                </a-row>
                            </template>
                            <template v-else>
                                <a-empty v-else-show style="color: white" :image="simpleImage" />
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="drawer" :class="{ 'drawer-on': leftShow }">
        <div class="drawer-mask" v-if="leftShow" @click="leftShow = false"></div>
        <div class="drawer-content" :style="{ transform: leftShow ? 'translateX(0%)' : 'translateX(-100%)' }">
            <div class="left-search">
                <a-input v-model:value="searchProject" class="theme-input" placeholder="项目查询" allow-clear>
                    <template #prefix>
                        <search-outlined />
                    </template>
                </a-input>
            </div>
            <p class="all-projects" @click="toChooseAllCompany()">
                <span>全部项目</span>
            </p>
            <div class="left-list format-scrollbar">
                <p v-if="innerProjectList.length" v-for="(item, index) in innerProjectList" :key="index" :class="{ choose: chooseProject?.id === item.id }" @click="toChooseProject(item)">
                    {{ item.name }}
                </p>
                <a-empty style="margin-top: 100px;" v-else :image="simpleImage" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Pie, Line, Bar, Column, measureTextWidth, G2 } from '@antv/g2plot';
import { post } from '../utils/index.js';
import { useRouter } from 'vue-router';
import { Empty } from 'ant-design-vue';
import { add } from '../utils/operation.js';
import dayjs from 'dayjs';
import * as echarts from 'echarts';
import chinaJSON from '../assets/json/china.json';
import hookWindowResize from '../hooks/hookWindowResize.js';
const { innerWidth, innerHeight } = hookWindowResize();
const timeOptions = [
    { label: '本月', value: 1 },
    { label: '上月', value: 2 },
    { label: '本季度', value: 3 },
    { label: '上季度', value: 4 },
    { label: '本年', value: 5 },
    { label: '上年', value: 6 },
    { label: '自定义', value: 7 },
];
const search = ref({
    timeType: 1,
    date_range: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')],
});
const projectList = ref([]);
const searchProject = ref(null);
const chooseProject = ref(null);
const pieChart = ref(null);
const lineChart = ref(null);
const barChart = ref(null);
const columnChart = ref(null);
const fullscreenDiv = ref(null);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const router = useRouter();
const leftShow = ref(false);
const dailyType = ref(2);
const settleSize = 10;
const settlePage = ref(null);
const settlePageOpts = ref([]);
const dailyTypeOpts = [
    {
        value: 1,
        label: '钢筋',
    },
    {
        value: 2,
        label: '混凝土',
    },
];
const indicator = ref('account_type');
const indicatorOpts = [
    {
        value: 'account_type',
        label: '核算分类',
    },
    {
        value: 'expenditure',
        label: '支出方向',
    },
];
const applyColumns = [
    {
        title: '物料名称',
        dataIndex: 'material_name',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '规格',
        dataIndex: 'model',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '日期',
        dataIndex: 'date',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '项目名称',
        dataIndex: 'project',
        sorter: false,
        ellipsis: true,
    },
    {
        title: '数量',
        dataIndex: 'quantity',
        sorter: false,
        ellipsis: true,
    },
];
const applyList = ref([]);
const contractStatistics = ref([]);
const contractSettleStatistics = ref({
    contract_amount: 0,
    settle_amount: 0,
});
const dailyQuantityStatistics = ref({
    apply: [],
    uselog: [],
    yanshou: [],
});

const supplierSettleStatistics = ref([]);
const indicatorStatistics = ref([]);
const onClose = () => {
    leftShow.value = false;
};
const headerStyle = {
    backgroundColor: 'rgba(255,255,255,0.2)',
    color: '#FFF',
    display: 'none',
};
const bodyStyle = {
    backgroundColor: 'rgba(255,255,255,0.2)',
    padding: '24px 0px 0px',
    boxSizing: 'border-box',
};
//地图 start
const chinaMap = ref();
let regions = [
    {
        name: '新疆维吾尔自治区',
        itemStyle: {
            areaColor: '#374ba4',
            opacity: 1,
        },
    },
    {
        name: '四川省',
        itemStyle: {
            areaColor: '#fe9b45',
            opacity: 1,
        },
    },
    {
        name: '陕西省',
        itemStyle: {
            areaColor: '#fd691b',
            opacity: 1,
        },
    },
    {
        name: '黑龙江省',
        itemStyle: {
            areaColor: '#ffc556',
            opacity: 1,
        },
    },
];
let scatter = [
    { name: '青剑湖', value: [116.46122, 39.97886, 9] },
    { name: '文清学院', value: [103.86615, 36.040129, 9] },
    { name: '第三代半导体', value: [87.613228, 43.810394, 9] },
    { name: '和美书苑', value: [112.915204, 28.207735, 9] },
];
function drawChina() {
    var myChart = echarts.init(chinaMap.value);
    echarts.registerMap('china', chinaJSON); //注册可用的地图
    var option = {
        geo: {
            map: 'china',
            roam: false, //是否允许缩放，拖拽
            zoom: 1.0, //初始化大小
            // //缩放大小限制
            // scaleLimit: {
            //     min: 1, //最小
            //     max: 2, //最大
            // },
            //设置中心点
            center: [115.97, 29.71],
            //省份地图添加背景
            // regions: regions,
            itemStyle: {
                areaColor: '#013065',
                color: 'red',
                borderColor: 'rgba(41, 133, 194, 0.9)',
                borderWidth: 1,
            },
            //高亮状态
            // emphasis: {
            //     itemStyle: {
            //         areaColor: '#1af9e5',
            //         color: '#fff',
            //     },
            // },
        },
        //配置属性
        series: {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: scatter,
            showEffectOn: 'render',
            rippleEffect: {
                //涟漪特效相关配置
                brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
            },
            hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
            label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                },
            },
            itemStyle: {
                //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
                normal: {
                    color: '#5bdeff', //散点的颜色
                    shadowBlur: 10,
                    shadowColor: 20,
                    fontSize: '12px',
                },
            },
            zlevel: 1,
        },
    };
    myChart.setOption(option);
}
// 地图 end
// 零星物资数据统计
const dataA = [
    {
        id: 1,
        name: '零星机械',
        times: 500,
        value: 300,
    },
    {
        id: 2,
        name: '零星材料',
        times: 90,
        value: 20,
    },
    {
        id: 3,
        name: '零星用工',
        times: 600,
        value: 700,
    },
];
// 计算宽度
function getWidthFn(val, type) {
    const baseW = 60;
    let numArr = [];
    dataA.forEach(item => {
        if (type == 1) numArr.push(Number(item.times));
        if (type == 2) numArr.push(Number(item.value));
    });
    const maxW = Math.max(...numArr);
    return `${(Number(val) / maxW) * baseW}%`;
}
onMounted(async () => {
    projectList.value = (await post('department/projects?type=3', { page_size: 1000 })).data;
    chooseProject.value = null;
    await refreshDates();
    drawChina();
});

function changeTimeType(timeType) {
    const quarter = dayjs()
        .set('month', parseInt(dayjs().month() / 3 + '') * 3)
        .startOf('month')
        .format('YYYY-MM-DD');
    switch (timeType) {
        case 1:
            search.value.date_range = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')];
            break;
        case 2:
            search.value.date_range = [dayjs().startOf('month').subtract(1, 'month').format('YYYY-MM-DD'), dayjs().endOf('month').subtract(1, 'month').format('YYYY-MM-DD')];
            break;
        case 3:
            search.value.date_range = [quarter, dayjs(quarter).add(2, 'month').endOf('month').format('YYYY-MM-DD')];
            break;
        case 4:
            search.value.date_range = [dayjs(quarter).subtract(3, 'month').format('YYYY-MM-DD'), dayjs(quarter).subtract(1, 'day').format('YYYY-MM-DD')];
            break;
        case 5:
            search.value.date_range = [dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().endOf('year').format('YYYY-MM-DD')];
            break;
        case 6:
            search.value.date_range = [dayjs().subtract(1, 'year').startOf('year').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').endOf('year').format('YYYY-MM-DD')];
            break;
        case 7:
            break;
    }
}
watch(
    () => search.value.date_range,
    async newVal => {
        refreshDates();
    }
);
watch(chooseProject, async value => {
    refreshDates();
});
const refreshDates = async () => {
    const start_date = search.value.date_range[0];
    const end_date = search.value.date_range[1];
    const searchData = {
        start_date: {},
        end_date: {},
    };
    if (start_date && end_date) {
        searchData.start_date = start_date;
        searchData.end_date = end_date;
    }
    const projectIdStr = chooseProject.value?.id || projectList.value.map(item => item.id).join(',');
    await Promise.all([
        selectContractStatistics({ project_ids: projectIdStr }),
        selectDailyQuantityStatistics({ project_ids: projectIdStr, ys_type: dailyType.value, ...searchData }),
        selectApplyList({ page: 1, size: 1000, project_ids: projectIdStr, ...searchData }),
        selectContractSettleStatistics({ project_ids: projectIdStr, ...searchData }),
        supplierSettleAmountStatistics({ project_ids: projectIdStr, ...searchData }),
        selectIndicatorStatistics({ project_ids: projectIdStr, type: indicator.value, ...searchData }),
    ]);
    updateLineChart();
    updatePieChart();
    updateBarChart();
    updateColumnChart();
};
const toChooseProject = record => {
    chooseProject.value = record;
    leftShow.value = false
};
const toChooseAllCompany = () => {
    leftShow.value = false
    if (!chooseProject.value) return;
    chooseProject.value = null;
    // refreshDates();
};
// 合同统计
const selectContractStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/contractStatistics', search).then(data => {
            contractStatistics.value = data;
            resolve(true);
        });
    });
};

// 合同结算统计
const selectContractSettleStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/contractSettleStatistics', search).then(data => {
            contractSettleStatistics.value = data;
            resolve(true);
        });
    });
};

// 供应商结算金额统计
const supplierSettleAmountStatistics = search => {
    let url = 'dataBoard/supplierSettleAmount';
    if (String(search.project_ids).split(',').length > 1) {
        url = 'dataBoard/projectSettleAmount';
    }
    return new Promise((resolve, reject) => {
        post(url, search).then(data => {
            supplierSettleStatistics.value = data;
            const pages = Math.ceil(supplierSettleStatistics.value.length / settleSize);
            settlePage.value = 1;
            settlePageOpts.value = new Array(pages).fill(1).map((item, index) => {
                return {
                    value: index + 1,
                    label: `第${index + 1}页`,
                };
            });
            resolve(true);
        });
    });
};

// 指标对比查询
const selectIndicatorStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/indicatorStatistics', search).then(data => {
            indicatorStatistics.value = data;
            resolve(true);
        });
    });
};

const selectDailyQuantityStatistics = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/dailyQuantityStatistics', search).then(data => {
            dailyQuantityStatistics.value = data;
            resolve(true);
        });
    });
};
// 物资申请计划
const selectApplyList = search => {
    return new Promise((resolve, reject) => {
        post('dataBoard/currentMonthApply', search).then(data => {
            applyList.value = data.map(item => {
                return {
                    ...item,
                    quantity: parseInt(item.quantity) === parseFloat(item.quantity) ? parseInt(item.quantity) : item.quantity,
                };
            });
            resolve(true);
        });
    });
};
function renderStatistic(containerWidth, text, style) {
    const textWidth = measureTextWidth(text, style);
    const textHeight = style.lineHeight || style.fontSize;
    const R = containerWidth / 2;
    // r^2 = (w / 2)^2 + (h - offsetY)^2
    let scale = 1;
    if (containerWidth < textWidth) {
        scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
    }
    const textStyleStr = `width:${containerWidth}px;`;
    return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : 'inherit'};color: white;">${text}</div>`;
}

// 合同统计图表配置
const updatePieChart = () => {
    const data = contractStatistics.value;
    const G = G2.getEngine('canvas');
    const defaultOpt = {
        appendPadding: 10,
        angleField: 'amount',
        colorField: 'type',
        color: ['#2389ff', '#0dcccc', '#f18e56', '#d787ff', '#7f6bff', '#ff2340', '#15a6c9'],
        radius: 0.85,
        innerRadius: 0.6,
        // label: {
        // 	type: "inner",
        // 	offset: '-30%',
        // 	content: ({ count }) => {
        // 		return count
        // 	}
        // },
        label: {
            type: 'spider',
            // content: ({ type, count, amount }) => {
            // 	return `${(amount / 10000).toFixed(2)}万元`
            // }
            formatter(data, mappingData) {
                const group = new G.Group({});
                group.addShape({
                    type: 'text',
                    attrs: {
                        x: 10,
                        y: 8,
                        text: `${(data.amount / 10000).toFixed(2)}万元`,
                        fill: mappingData.color,
                    },
                });
                return group;
            },
        },
        statistic: {
            title: {
                offsetY: -4,
                style: {
                    fontSize: '36px',
                },
                customHtml: (container, view, datum) => {
                    const { width, height } = container.getBoundingClientRect();
                    const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
                    const text = datum ? datum.type : '合同总额';
                    return renderStatistic(d, text, { fontSize: 28 });
                },
            },
            content: {
                offsetY: 4,
                style: {
                    fontSize: '12px',
                },
                customHtml: (container, view, datum, data) => {
                    const { width } = container.getBoundingClientRect();

                    let text = add(data.map(item => item.amount));
                    if (text) {
                        text = `${(text / 10000).toFixed(2)}万元`;
                    }
                    return renderStatistic(width, text, { fontSize: 2 });
                },
            },
        },
        legend: {
            title: {
                text: `合同总数:${data.reduce((target, item) => target + item.count, 0)}份`,
                spacing: 10,
                style: { fill: 'white' },
            },
            itemValue: {
                formatter(text, item) {
                    const items = data.filter(d => d.type === item.value);
                    return (items[0] || {}).count + ' 份';
                },
                style: {
                    fill: 'white',
                },
            },
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        tooltip: {
            customContent(value, items) {
                const item = items.filter(i => i.data.type === value)[0];
                return `
            <div style="padding: 5px 0;text-align:left;">
                <div style="background-color: ${item?.color};border-radius: 50%;width: 8px;height:8px;display:inline-block;"></div> ${item?.data.type}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同数</b>: ${item?.data.count}</div>
            <div style="padding: 5px 0;text-align:left;"><b>合同总金额</b>: ${item?.data.amount}</div>
          `;
            },
        },
        interactions: [{ type: 'element-active' }],
    };
    if (!pieChart.value) {
        pieChart.value = new Pie('contractStatistics', {
            ...defaultOpt,
            data,
        });
        pieChart.value.render();
        pieChart.value.on('legend-item:click', event => {
            const target = event.gEvent?.shape?.attrs?.text;
            const data2Type = data.reduce((target, item) => {
                target[item.type] = item;
                return target;
            }, {});
            const typeObj = data2Type[target];
            if (!typeObj) return;
            const query = {
                type: typeObj.type_id,
                project_id: chooseProject.value.id,
            };
            if (typeObj.material_type) query.material_type = typeObj.material_type;
            switch (query.type) {
                case 1:
                    router.push({
                        path: `/contract`,
                        query,
                    });
                    break;
                case 2:
                    router.push({
                        path: `/contractzz`,
                        query,
                    });
                    break;
                case 3:
                    router.push({
                        path: `/contractjx`,
                        query,
                    });
                    break;
            }
            // 在这里处理你的点击事件逻辑
        });
    } else {
        pieChart.value.update({
            ...defaultOpt,
            data,
        });
    }
};
// 计划、验收及出库统计 配置
const updateLineChart = () => {
    const data = [];
    for (const key in dailyQuantityStatistics.value) {
        let type;
        switch (key) {
            case 'apply':
                type = '计划数量';
                break;
            case 'uselog':
                type = '出库数量';
                break;
            case 'yanshou':
                type = '验收数量';
                break;
        }
        for (const item of dailyQuantityStatistics.value[key]) {
            data.push({
                category: type,
                date: item.date,
                value: item.quantity,
            });
        }
    }
    const defaultOpt = {
        data,
        xField: 'date',
        yField: 'value',
        seriesField: 'category',
        legend: {
            position: 'top',
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        xAxis: {
            label: {
                style: {
                    fill: 'white',
                },
            },
        },
        tooltip: {
            itemTpl: `<div style="margin-bottom: 10px;list-style:none;text-align: left;">
                        <span style="background-color:{color};" class="g2-tooltip-marker"></span>
                        {name}： {value}
                      </div>`, // 自定义 toolTip 样式
        },
    };
    if (!lineChart.value) {
        lineChart.value = new Line('dailyStatistics', {
            ...defaultOpt,
            data,
        });
        lineChart.value.render();
    } else {
        lineChart.value.update({
            ...defaultOpt,
            data,
        });
    }
};

// 开累结算统计 配置
const updateBarChart = () => {
    const data = [];
    for (let i = (settlePage.value - 1) * settleSize; i < supplierSettleStatistics.value.length && i < settlePage.value * settleSize; i++) {
        const statistic = supplierSettleStatistics.value[i];
        data.push({
            name: statistic.name,
            type: '应结算额(万元)',
            amount: parseFloat((statistic.amount / 10000).toFixed(2)),
        });
        data.push({
            name: statistic.name,
            type: '已结算额(万元)',
            amount: parseFloat((statistic.settle_amount / 10000).toFixed(2)),
        });
    }
    const defaultCfg = {
        isGroup: true,
        xField: 'name',
        yField: 'amount',
        seriesField: 'type',
        dodgePadding: 2,
        minBarWidth: 10,
        maxBarWidth: 40,
        legend: {
            position: 'top', // 将颜色标签放在图表的右侧
            itemName: {
                style: {
                    fill: 'white',
                },
            },
        },
        // label: {
        // 	// 可手动配置 label 数据标签位置
        // 	position: 'middle', // 'left', 'middle', 'right'
        // 	formatter(data) {
        // 		if (parseFloat(data.amount) === 0) return data.amount;
        // 		return data.amount + '万元';
        // 	},
        // 	// 可配置附加的布局方法
        // 	layout: [
        // 		// 柱形图数据标签位置自动调整
        // 		{ type: 'interval-adjust-position' },
        // 		// 数据标签防遮挡
        // 		{ type: 'interval-hide-overlap' },
        // 		// 数据标签文颜色自动调整
        // 		{ type: 'adjust-color' },
        // 	],
        // },
        xAxis: {
            // title: {
            //   text: '万元',
            //   position: 'end',
            // },
            label: {
                style: {
                    fill: 'white',
                },
                formatter(item) {
                    if (parseFloat(item) === 0) return item;
                    return item;
                },
            },
        },
        yAxis: {
            label: {
                style: {
                    fill: 'white',
                    //  textAlign: 'right'
                },
                formatter(text) {
                    let result = '';
                    while (text) {
                        result += `${text.slice(0, 8)}\n`;
                        text = text.slice(8);
                    }
                    return result;
                },
            },
        },
        tooltip: {
            // showMarkers: true,
            itemTpl: `<div style="margin-bottom: 10px;list-style:none;text-align: left;">
                        <span style="background-color:{color};" class="g2-tooltip-marker"></span>
                        {name}： {value}
                      </div>`, // 自定义 toolTip 样式
            // formatter: datum => {
            //     return { name: datum.name, value: datum.amount };
            // },
        },
    };
    if (!barChart.value) {
        barChart.value = new Column('supplierSettleAmountStatistics', {
            ...defaultCfg,
            data,
        });
        barChart.value.render();
    } else {
        barChart.value.update({
            ...defaultCfg,
            data,
        });
    }
};

// 指数对标 配置
const updateColumnChart = () => {
    const data = indicatorStatistics.value;
    const defaultCfg = {
        xField: 'name',
        yField: 'data',
        color: '#f18e56',
        xAxis: {
            label: {
                autoRotate: false,
                style: {
                    fill: 'white',
                },
            },
        },
        background: {
            fill: 'white',
        },
        yAxis: {
            label: {
                style: {
                    // fill: 'white',
                },
            },
        },
        // slider: {
        //     start: 0,
        //     end: 1,
        // },
        meta: {
            data: {
                alias: '数量',
            },
        },
    };
    if (!columnChart.value) {
        columnChart.value = new Column('indicatorStatistics', {
            ...defaultCfg,
            data,
        });
        columnChart.value.render();
    } else {
        columnChart.value.update({
            ...defaultCfg,
            data,
        });
    }
};

const innerProjectList = computed(() => {
    if (searchProject.value) {
        return projectList.value.filter(item => item.name.indexOf(searchProject.value) > -1);
    } else {
        return projectList.value;
    }
});
const fullScreen = () => {
    if (fullscreenDiv.value.requestFullscreen) {
        fullscreenDiv.value.requestFullscreen();
    } else if (fullscreenDiv.value.mozRequestFullScreen) {
        fullscreenDiv.value.mozRequestFullScreen();
    } else if (fullscreenDiv.value.webkitRequestFullscreen) {
        fullscreenDiv.value.webkitRequestFullscreen();
    } else if (fullscreenDiv.value.msRequestFullscreen) {
        fullscreenDiv.value.msRequestFullscreen();
    }
};
const changeDailyType = async () => {
    let projectIds = [];
    if (chooseProject.value) {
        projectIds = [chooseProject.value.projectId];
    }
    const projectIdsStr = projectIds.join(',');
    await selectDailyQuantityStatistics({ project_ids: projectIdsStr, ys_type: dailyType.value });
    updateLineChart();
};
const changeSettlePage = () => {
    updateBarChart();
};
const changeIndicator = async () => {
    let projectIds = [];
    if (chooseProject.value) {
        projectIds = [chooseProject.value.projectId];
    }
    const projectIdsStr = projectIds.join(',');
    await selectIndicatorStatistics({ project_ids: projectIdsStr, type: indicator.value });
    updateColumnChart();
};
</script>
<style>
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}
</style>
<style scoped lang="scss">
$theme-color: #013065;
$theme-font-color: white;
$theme-border-color: rgba(41, 133, 194, 0.5);
:deep(.theme-btn) {
    padding: 0px 10px;
    color: $theme-font-color;
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(34, 160, 243, 0.6);
}
:deep(.theme-btn):hover {
    color: $theme-font-color;
    background-color: rgba(0, 154, 255, 0.6);
    border: 1px solid rgba(34, 160, 243, 0);
}
* {
    margin: 0px;
    padding: 0px;
}
.theme-input {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    padding: 5.6px 11px;
    :deep(.ant-input) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-picker-input input),
    :deep(.anticon-swap-right),
    :deep(.ant-picker-suffix) {
        color: $theme-font-color !important;
    }
}
.theme-radio {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    outline: unset !important;
    :deep(.ant-radio-button-wrapper) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-radio-button-checked) {
        background-color: #0e7eff;
    }
    :deep(.ant-radio-button-input) {
        display: none;
    }
}
.theme-select {
    color: $theme-font-color;
    background-color: $theme-color;
    border: 1px solid $theme-border-color;
    :deep(.ant-select-selector) {
        color: $theme-font-color;
        background-color: $theme-color;
        border: $theme-border-color;
    }
    :deep(.ant-select-arrow) {
        color: $theme-font-color;
    }
}
.board {
    box-sizing: border-box;
    height: 100%;
    min-height: 919px;
    text-align: center;
    color: $theme-font-color;
    background-color: $theme-color;
    background-image: url('../assets/data-bg.png');
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    > .title {
        .left-opt {
            position: absolute;
            left: 10px;
        }
        .full-screen {
            position: absolute;
            right: 10px;
            .time-filter {
                margin-right: 10px;
            }
        }
        position: relative;
        height: 64px;
        line-height: 64px;
        font-size: 20px;
        // border-top: 1px solid $theme-border-color;
        // border-bottom: 1px solid $theme-border-color;
        // background-color: $theme-color;
    }
}

.border-main {
    height: calc(100vh - 124px);
    flex: 1;
    .title {
        color: $theme-font-color;
        background-color: $theme-color;
        padding: 5px 0;
        font-weight: bold;
    }
    .statistics {
        width: 70%;
        padding-right: 1px;
        flex-direction: column;
        .t-statistics {
            height: 65%;
            .tl-statistics {
                padding-right: 1px;
                width: 50%;
                overflow: hidden;
                flex-direction: column;
                .title {
                    border-bottom: 1px solid $theme-border-color;
                }
                .tl-t-statistics {
                    .title {
                        font-weight: bold;
                    }
                    height: 50%;
                    overflow: hidden;
                    border: 1px solid $theme-border-color;
                    border-top: none;
                }
                .tl-b-statistics {
                    height: 50%;
                    border: 1px solid $theme-border-color;
                    border-top: none;
                    .title {
                        border-bottom: 1px solid $theme-border-color;
                        font-weight: bold;
                    }
                    #dailyStatistics {
                        padding: 5px;
                    }
                }
            }
            .tr-statistics {
                .title {
                    border-bottom: 1px solid $theme-border-color;
                    font-weight: bold;
                }
                border-bottom: 1px solid $theme-border-color;
            }
        }
        .b-statistics {
            overflow: hidden;
            .bl-statistics {
                width: 50%;
                padding-right: 1px;
                height: 100%;
                overflow: hidden;
                flex-direction: column;
                border: 1px solid $theme-border-color;
                .bl-statistics-title {
                    position: sticky;
                    top: 0;
                    background-color: $theme-color;
                    z-index: 1;
                    font-weight: bold;
                    .table-title {
                        background-color: $theme-color;
                        padding: 8px 0;
                        border: 1px solid $theme-border-color;
                        //font-weight: bold;
                    }
                }

                .table-body {
                    //animation: scroll 20s linear infinite;
                    color: #98c5ff;
                    .li {
                        padding: 8px 0;
                        border-bottom: 1px solid $theme-border-color;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                }
            }
            .br-statistics {
                .title {
                    border-bottom: 1px solid $theme-border-color;
                    font-weight: bold;
                }
                max-width: 50%;
                flex: 1;
            }
        }
    }
    .settle {
        flex: 1;
        height: 100%;
        border: 1px solid $theme-border-color;
        .title {
            border-bottom: 1px solid $theme-border-color;
            font-weight: bold;
        }
        .t-settle {
            height: 100%;
            #supplierSettleAmountStatistics {
                padding: 0 5px;
                height: calc(100% - 35px);
            }
        }
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 修改滚动条轨道的背景颜色 */
::-webkit-scrollbar-track {
    background: #012650;
}

/* 修改滚动条滑块的背景颜色 */
::-webkit-scrollbar-thumb {
    background: #4fa5ff;
    border-radius: 1rem;
}

/* 修改滚动条滑块悬停时的背景颜色 */
::-webkit-scrollbar-thumb:hover {
    background: #4fa5ff;
}
.borderB {
    position: relative;
    background-color: rgba(41, 133, 194, 0.05);
    border: 1px solid rgba(41, 133, 194, 0.5);
    box-shadow: inset 0 0 10px rgba(41, 133, 194, 0.5);
    display: flex;
    flex-direction: column;
    .titleB {
        position: relative;
        height: 48px;
        padding-left: 32px;
        box-sizing: border-box;
        padding-right: 16px;
        line-height: 48px;
        display: flex;
        z-index: 2;
        border-bottom: 1px solid rgba(41, 133, 194, 0.5);
        span {
            font-size: 16px;
        }
    }
    .titleB::after {
        content: '';
        position: absolute;
        left: 16px;
        width: 6px;
        height: 6px;
        top: calc(50% - 3px);
        border-radius: 50px;
        background-color: #0ea6ff;
        box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
    }
    .borderB_cont {
        position: relative;
        z-index: 2;
        padding: 10px;
        overflow: hidden;
    }
}
.borderB::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-shadow: 0 0 2px 1px rgba(41, 133, 194, 0.5);
}
.container {
    box-sizing: border-box;
    display: grid;
    padding: 12px;
    width: 100%;
    // height: 100%;
    grid-template-columns: 1fr 640px 1fr;
    grid-template-rows: 270px 230px auto;
    gap: 12px;
    .item-1 {
        grid-row: 1 / 2; /* 合并占据 1到2 行，不包括3 */
        // grid-column: 1 / 1; /* 合并占据 1到1 列，不包括2 */
    }
    .item-2 {
        grid-row: 1 / 3; /* 合并占据 1到2 行，不包括3 */
    }
    .item-5 {
        grid-column: 1 / 3; /* 合并占据 1到2 列 */
    }
    .item-6 {
        overflow: hidden;
    }
    .table-title {
        background-color: $theme-color;
        padding: 8px 0;
        border: 1px solid $theme-border-color;
        border-top: unset !important;
        border-left: unset !important;
    }
    .table-title:last-of-type {
        border-right: unset !important;
    }
    .table-body {
        //animation: scroll 20s linear infinite;
        color: #98c5ff;
        .li {
            padding: 8px 0;
            border-bottom: 1px solid $theme-border-color;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}
.pagination {
    right: 10px;
    top: 10px;
    position: absolute;
    :deep(.ant-pagination-item) {
        background-color: unset !important;
        a {
            color: #fff;
        }
    }
    :deep(.ant-pagination-jump-next) {
        color: #fff;
    }
    :deep(.ant-pagination-item-ellipsis) {
        color: #fff;
    }
    :deep(.ant-pagination-next button) {
        color: rgb(215 215 215 / 100%);
    }
    :deep(.ant-pagination-prev button) {
        color: rgb(215 215 215 / 100%);
    }
}
.g2-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-radius: 4px 4px 0 0;
    table-layout: fixed;
}
.g2-thead {
    display: table-header-group;
    vertical-align: middle;
    border-bottom-color: $theme-border-color;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    // background-color: #fafafa;
}
.th-index {
    width: 30px;
}
.g2-thead th {
    height: 30px;
    font-size: 12px;
}
.th-index {
    width: 10%;
}
.th-id {
    text-align: center;
    width: 30%;
}

.th-time {
    text-align: left;
    width: 35%;
}
.th-value {
    text-align: left;
    width: 35%;
}
.g2-table-row {
    height: 47px;
    vertical-align: middle;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: $theme-border-color;
}
.g2-table-column {
    font-size: 12px;
    color: rgba($color: #fff, $alpha: 0.8);
    /*padding: 15px;*/
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.g2-guide-html {
    width: 50px;
    height: 40px;
    vertical-align: middle;
    line-height: 1.2;
}
.g2-guide-html .title {
    font-size: 12px;
    color: #8c8c8c;
    font-weight: 300;
}
.g2-guide-html .value {
    font-size: 14px;
    color: #000;
    font-weight: bold;
}
canvas {
    position: relative;
    float: left;
}
.barBox {
    position: relative;
    display: flex;
    height: 30px;
    width: 100%;
    align-items: center;
    .bar {
        width: 70%;
        height: 30px;
        margin-right: 4px;
    }
    .bar1 {
        background-color: #0dcccc;
    }
    .bar2 {
        background-color: #f18e56;
    }
}

.drawer {
    width: 0%;
    position: fixed;
    z-index: 1000;
    inset: 0;
    height: 100%;
    left: 0;
    top: 0;
}
.drawer-on {
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.drawer-mask {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.45);
    height: 100%;
    opacity: 1;
    transition: none;
    animation: DrawerFadeIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.drawer-content {
    background-color: rgba($color: #255388, $alpha: 0.7);
    width: 200px;
    height: 100%;
    position: absolute;
    left: 0px;
    box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.drawer-contentOn {
    transform: translateX(0%) !important;
}
@keyframes DrawerFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.left-search {
    position: sticky;
    padding: 20px 10px;
    top: 0;
    background-color: rgba($color: #fff, $alpha: 0.2);
    z-index: 2;
}
.all-projects {
    padding: 12px;
    display: flex;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.4);
    span {
        width: 100%;
        height: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        text-align: center;
        border: 1px solid rgba($color: #fff, $alpha: 0.6);
        border-radius: 8px;
    }
    span:hover{
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba($color: #fff, $alpha: 1);
    }
}
.left-list {
    height: calc(100% - 134px);
    max-width: 200px;
    min-width: 200px;
    box-sizing: border-box;
    overflow-y: auto;
    p {
        height: 36px;
        line-height: 36px;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        text-align: center;
    }
    p:hover{
        color: rgba(255, 255, 255, 1);
    }
    p + p {
        border-top: 1px solid rgba($color: #fff, $alpha: 0.4);
    }
}
</style>
